<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-29 13:02:28
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-29 13:32:45
 * @FilePath: \mapview\src\components\alarmInfo\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div>
    <!-- -->
    <titleLeft :dataVal="dataVal"></titleLeft>
    <div class="hand-view">
      <div class="hand-stat first">
        <img :src="handImg3" alt="" class="hand-img">
        <div>
         <span class="hand-text">未处理</span> <br>
          <span class="hand-text num-text">{{dataVal.a1}} 起</span>
         
        </div>
      </div>
      <div class="hand-stat">
        <img :src="handImg2" alt="" class="hand-img">
        <div>
          <span class="hand-text">已处理</span> <br>
          <span class="hand-text num-text color-text">{{dataVal.b1}} 起</span>
        </div>
      </div>
    </div>
    

  </div>
</template>

<script>
import titleLeft from "./titleLeft" //右二 偷油预警
import titleBg from "../tableView/titleBg" // 报警信息
export default {
  name: 'MapviewIndex',
  components: {
    titleLeft,
    titleBg
  },
  // props: {
  //   dataVal:{
  //     type:Object,
  //     default:()=>{}
  //   }
  // },
  props:['dataVal'],
  data() {
    return {
      imgSrc:require('../../assets/img/alarmInfo/sum.png'),
      handImg:require('../../assets/img/alarmInfo/yichuli.png'),
      handImg1:require('../../assets/img/alarmInfo/weichuli_1.png'),
      handImg2:require('../../assets/img/alarmInfo/wie.png'),
      handImg3:require('../../assets/img/alarmInfo/yi.png'),
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style scoped>
  .oneImg-view{
    margin:50px;
  }
  .hand-view{
    padding-top:200px;
    display: flex;
    
  }
  .hand-stat{
    border :2px solid aqua;
    border-radius: 10px;
    padding: 10px;
    width: calc(50% - 120px);
    display: flex;
    margin:5px 20px;
    background: linear-gradient(45deg, rgba(128,168,218, 0.8) 0%, rgba(128,168,218, 0.1) 100%)  ;
  }
  .hand-img{
    width: 60px;
    margin-right: 20px;;
  }
  .hand-text{
    color: #fff;
    font-size: 20px;
    width: 10px;
    text-shadow: 2px 2px 2px #fff;
  }
  .first{
    margin-left:120px;
  }
  .num-text{
    font-size: 25px;
    font-weight: bold;
    color: #FFA100;
    text-shadow: 0px 0px 0px aqua;
  }
  .color-text{
    color: #fff;
  }

  
  @keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.first {
  animation: scaleAnimation 2s infinite;
}


</style>